<template>
	<view class="stock-list">
		<!-- 搜索 -->
		<view class="search">
			<view class="input">
				<input type="text" v-model="params.key" @confirm="getDate" placeholder="搜索" placeholder-class="placeholder-class" />
			</view>
			<view class="icon-btn">
				<text class="iconfont icon-search"></text>
			</view>
		</view>
		<view class="lists">
			<view class="list-item" v-for="item in lists" :key="item.gid" @click="changeSelect(item)">
				<view class="item-img">
					<image :src="item.product_thumb" mode="widthFix"></image>
				</view>
				<view class="flex-1 flex flex-column justify-between">
					<view class="">
						<view class="flex align-start">
							<view class="tags margin-r16 margin-t8">
								<!--  0全部/2待付款/3待确认/4待发货/5待取货/6租赁中/7待归还/1已完成/-1已取消 -->
								<view v-if="item.rentable_quantity > 0" class="tag-item tag-success">可租</view>
								<view v-else class="tag-item tag-error">库存不足</view>
								<!-- <view class="tag-item tag-wait">已租</view> -->
							</view>
							<view class="title">{{item.product_title}}</view>
						</view>
					</view>
					<view class="flex align-end justify-between">
						<view class="">
							<view v-if="item.is_sn" class="sn">SN:{{item.sn}}</view>
							<view v-else class="sn">数量:{{item.quantity}}{{item.unit_title}}</view>
							<view class="sn">服务商:{{item.warehouse_name}}</view>
						</view>
						<block>
							<view v-if="selectKeys.includes(item.gid)" class="iconfont icon-icon-test4"></view>
							<view v-else class="iconfont icon-radio " :class="{'select-disabled': item.rentable_quantity === 0}"></view>
						</block>
					</view>
				</view>
			</view>
			<view v-if="!loading && lists.length === 0" class="empty">暂无数据</view>
		</view>
		
		
		<view class="footer-btns">
			<button class="confirm-btn flex-1" @click="handleConfirm">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],
				params: {
					limit: 10, // integer  页数 必需 示例值: 10
					page: 1, // integer  页码 必需 示例值: 1
					product_gid: '', // integer  产品GID 可选
					key: '', // string  可选 搜索：名称/EAN/SN
				},
				more: true, // 是否还有更多数据
				loading: true, // 是否正在加载数据
				selectKeys: [],
			};
		},
		onLoad(options) {
			this.params.product_gid = options.product_gid
			this.getList()
		},
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		methods: {
			changeSelect(item) {
				if (item.rentable_quantity > 0) {
					this.selectKeys = [item.gid]
				} else {
					uni.showToast({
						icon: 'none',
						title: '库存数量不足，不可选'
					})
				}
				// if (this.selectKeys.includes(item)) {
				// 	this.selectKeys = this.selectKeys.filter((i) => i !== item);
				// } else {
				// 	this.selectKeys.push(item)
				// }
			},
			handleConfirm() {
				const data = this.lists.filter(item=> this.selectKeys.includes(item.gid))
				uni.$emit('selectStock', this.selectKeys, data)
				uni.navigateBack()
			},
			getDate() {
				this.params.page = 1
				this.getList()
			},
			getList() {
				this.loading = true
				this.$api.warehouseProductStockListApi(this.params).then(res=> {
					if (this.params.page === 1) {
						this.lists = []
					}
					
					if (res.data.length === 0 || res.data.length < this.params.limit) {
						this.more = false
					} else {
						this.more = true
						this.params.page++
					}
					
					this.lists = this.lists.concat(res.data)
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.stock-list {
		padding: 0 52rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.search {
			position: sticky;
			top: 0;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			width: 100%;
			height: 100rpx;
			padding-top: 18rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-bottom: 1px solid rgba(0, 0, 0, 0.2);
			
			
			.input {
				flex: 1;
				padding-left: 4rpx;
			}
			
			.icon-btn {
				padding: 0 32rpx;
			}
		}
		
		.lists {
			padding-top: 32rpx;
			border-radius: 24rpx;
		}
		
		.list-item {
			position: relative;
			display: flex;
			padding: 40rpx 0;
			
			&::after {
				content: '';
				position: absolute;
				left: 32rpx;
				bottom: 0;
				width: calc(100% - 64rpx);
				height: 1px;
				background-color: #F1F1F1;
			}
			
			.item-img {
				width: 164rpx;
				height: 164rpx;
				display: flex;
				flex-shrink: 0;
				overflow: hidden;
				margin-right: 38rpx;
				align-items: center;
				border-radius: 12rpx;
				justify-content: center;
				background-color: #F6F6F6;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
			
			.title {
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
			}
			
			.sn {
				color: #999999;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 28rpx;
				text-align: left;
				padding-top: 8rpx;
			}
			
			.iconfont {
				font-size: 42rpx;
				color: #999999;
				margin-left: 16rpx;
			}
			
			.icon-duoxuanxuanzhong, .icon-icon-test4 {
				color: var(--primary-color);
			}
			
			.select-disabled {
				position: relative;
				border-radius: 999px;
				z-index: 9;
				
				&::after {
					position: absolute;
					content: '';
					top: 50%;
					left: 50%;
					width: 80%;
					height: 80%;
					z-index: -1;
					border-radius: 999px;
					transform: translateX(-50%) translateY(-50%);
					background-color: #dadada;
				}
			}
		}
		
		.tags {
			display: flex;
			align-items: center;
			gap: 10rpx;
		}
		
		.tag-item {
			display: flex;
			align-items: center;
			justify-content: center;
		
			flex-shrink: 0;
			padding: 4rpx 8rpx;
			border-radius: 8rpx;
			background-color: #868686;
		
			color: #FFFFFF;
			font-size: 18rpx;
			font-weight: 400;
			line-height: 24rpx;
			text-align: left;
		}
		
		.tag-success {
			background-color: #009D6E;
		}
		
		.tag-complate {
			background-color: #D4D4D4;
		}
		
		.tag-wait {
			background-color: #003D99;
		}
		
		.tag-error {
			background-color: #ff5252;
		}
		
		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
			gap: 14rpx;
			display: flex;
			align-items: center;
			
			.cancel {
				flex: 1;
				// width: 178rpx;
				height: 80rpx;
				border: 1px solid var(--primary-color);
			
				color: var(--primary-color);
				font-size: 34rpx;
				font-weight: 400;
				line-height: 80rpx;
				text-align: center;
			}
			
			.confirm {
				flex: 3;
				height: 80rpx;
				border: 1px solid var(--gradient-color-vertical);
				background: var(--gradient-color-vertical);
			
				font-size: 34rpx;
				font-weight: 400;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>
